前端开发 js开发的一款连线网页小游戏(Path Finder)

JS 开发网页小游戏，供大家学习参考

1. svg, html, body, #app {
   1. box-sizing: border-box;
   2. height: 100%;
   3. width: 100%;
   4. padding: 0;
   5. margin: 0;
   6. overflow: hidden;

   }

2. body {
   1. cursor: crosshair;
   2. background-color: black;
   3. background-image: linear-gradient(to top, rgba(46, 204, 113,0.2) 1%, rgba(255,255,255,0) 0), linear-gradient(to right, rgba(46, 204, 113,0.2) 1%, rgba(255,255,255,0) 0);
   4. background-size: 50px 50px;

   }body {

   1. display: block;
   2. margin: 8px;

   }Inherited from html

   1. aLink: ""
   2. accessKey: ""
   3. assignedSlot: null
   4. attributeStyleMap: StylePropertyMap {size: 0}
   5. attributes: NamedNodeMap {length: 0}
   6. autocapitalize: ""
   7. background: ""
   8. baseURI: "file:///C:/Users/cingular/Downloads/%E5%89%8D%E7%AB%AF/lianxian.html"
   9. bgColor: ""
   10. childElementCount: 2
   11. childNodes: NodeList(5) [text, div#app, text, script, text]
   12. children: HTMLCollection(2) [div#app, script, app: div#app]
   13. classList: DOMTokenList [value: ""]
   14. className: ""
   15. clientHeight: 610
   16. clientLeft: 0
   17. clientTop: 0
   18. clientWidth: 572
   19. contentEditable: "inherit"
   20. dataset: DOMStringMap {}
   21. dir: ""
   22. draggable: false
   23. firstChild: text
   24. firstElementChild: div#app
   25. hidden: false
   26. id: ""
   27. innerHTML: "↵<div id="app">↵ <div id="score"></div>↵ <svg id="svg"></svg>↵ ↵ <div id="launch-screen" class="is-visible">↵ ↵ <div id="launch-screen-content">↵ <h1 id="launch-screen__title">Path finder</h1>↵ <p id="launch-screen__description">Find the nearest yellow dot.</p>↵ <button class="btn" id="start-btn">PLAY</button>↵ </div>↵ </div>↵ ↵</div>↵<script type="text/javascript">↵↵////////////////↵// helpers↵////////////////↵↵function getDistance(obj1, obj2) {↵ return Math.floor(↵ Math.sqrt(Math.pow(obj1.cx - obj2.cx, 2) Math.pow(obj1.cy - obj2.cy, 2))↵ );↵}↵↵function getRandomArbitrary(min, max) {↵ return Math.floor(Math.random() * (max - min) min);↵}↵↵function comparator(a, b) {↵ if (a[1] < b[1]) return -1;↵ if (a[1] > b[1]) return 1;↵ return 0;↵}↵↵function difference(source, toRemove) {↵ return source.filter(function(value) {↵ return toRemove.indexOf(value) == -1;↵ });↵}↵↵////////////////↵// global vars↵////////////////↵↵var svg = document.getElementById("svg");↵var dotMatrix = document.createElementNS(↵ "http://www.w3.org/2000/svg",↵ "circle"↵);↵var lineMatrix = document.createElementNS("http://www.w3.org/2000/svg", "line");↵var screenW = window.innerWidth;↵var screenH = window.innerHeight;↵var totalDist = document.getElementById("distance");↵↵////////////////↵// line constructor↵////////////////↵↵function Line(x1, y1, x2, y2) {↵ this.x1 = x1;↵ this.y1 = y1;↵ this.x2 = x2;↵ this.y2 = y2;↵ this.el = document.createElementNS("http://www.w3.org/2000/svg", "line");↵ this.class = "line";↵ this.update = function(x1, y1, x2, y2) {↵ this.el.setAttribute("x1", x1 || this.x1);↵ this.el.setAttribute("y1", y1 || this.y1);↵ this.el.setAttribute("x2", x2 || this.x2);↵ this.el.setAttribute("y2", y2 || this.y2);↵ this.setAttr("class", this.class);↵ };↵ this.setAttr = function(attr, value) {↵ this.el.setAttribute(attr, value);↵ };↵ this.append = function() {↵ svg.insertBefore(this.el, svg.firstChild);↵ };↵}↵↵////////////////↵// dot constructor↵////////////////↵↵function Dot(r, cx, cy) {↵ this.r = r;↵ this.cx = cx;↵ this.cy = cy;↵ this.el = document.createElementNS("http://www.w3.org/2000/svg", "circle");↵ this.class = "dot";↵ this.update = function() {↵ this.el.setAttribute("r", this.r);↵ this.el.setAttribute("cx", this.cx);↵ this.el.setAttribute("cy", this.cy);↵ this.setAttr("class", this.class);↵ };↵↵ // activates a dot↵ this.activate = function() {↵ for (i = 0; i < dots.num; i ) {↵ dots.list[i].setAttr("data-selected", "false");↵ }↵ this.setAttr("data-selected", "true");↵ };↵↵ this.visited = function() {↵ this.setAttr("data-visited", "true");↵ };↵↵ // sets attribute to element↵ this.setAttr = function(attr, value) {↵ this.el.setAttribute(attr, value);↵ };↵↵ // gets attribute to element↵ this.getAttr = function(attr) {↵ return this.el.getAttribute(attr);↵ };↵↵ // appends element to svg and attaches event listeners↵ this.append = function() {↵ svg.appendChild(this.el);↵ this.el.addEventListener("click", this.onClick);↵ };↵↵ // on click on element↵ this.onClick = function(event) {↵ //gets the id and the coords of the dot↵ var thisId = Number(event.target.getAttribute("data-id").substr(3, 2));↵ var thisCx = dots.list[thisId].cx;↵ var thisCy = dots.list[thisId].cy;↵↵ // calculates the distance between dots↵ var distances = [];↵ for (i = 0; i < dots.num; i ) {↵ distances[i] = [i, getDistance(dots.selected, dots.list[i])];↵ }↵ distances.sort(comparator);↵ distances.splice(0, 1);↵ var distancesLeft = [];↵ for (i = 0; i < distances.length; i ) {↵ if (dots.left.includes(distances[i][0])) {↵ distancesLeft.push(distances[i][0]);↵ }↵ }↵↵ //if the element is the nearest↵ if (thisId == distancesLeft[0] && dots.left.includes(thisId)) {↵ // calculates distances↵ var newDistance = getDistance(dots.list[thisId], dots.selected);↵↵ app.score.update(1); // punteggio x numero di poi↵ // app.score.update(newDistance); punteggio x distanza↵↵ //sets the active class to the selected dot↵ dots.list[thisId].activate();↵ dots.list[thisId].visited();↵↵ // creates the line↵ lines.list.push(↵ new Line(↵ dots.selected.cx,↵ dots.selected.cy,↵ dots.list[thisId].cx,↵ dots.list[thisId].cy↵ )↵ );↵ lines.list[lines.list.length - 1].update();↵ lines.list[lines.list.length - 1].append();↵↵ // creates the preview line↵ //TODO: eliminare le vecchie preline che rimangono vive↵↵ svg.addEventListener("mousemove", function prelineMove(e) {↵ mouseX = e.pageX;↵ mouseY = e.pageY;↵ app.preline.update(thisCx, thisCy, mouseX, mouseY);↵ });↵↵ //saves the selected dots coordinates↵ dots.selected.id = thisId;↵ dots.selected.cx = thisCx;↵ dots.selected.cy = thisCy;↵↵ //removes the dot from the list of remaining dots↵ for (i = 0; i < dots.left.length; i ) {↵ if (dots.left[i] === thisId) {↵ dots.left.splice(i, 1);↵ }↵ }↵↵ if (dots.left.length == 0) {↵ app.end(true);↵ }↵ } else {↵ app.end(false);↵ }↵ };↵}↵↵////////////////↵// lines group↵////////////////↵↵var lines = {↵ list: []↵};↵↵////////////////↵// dots group↵////////////////↵↵var dots = {};↵dots.num = 20;↵dots.list = [];↵dots.start = 0;↵dots.selected = {};↵dots.selected.id = dots.start;↵dots.left = [];↵dots.preline;↵↵////////////////↵// app↵////////////////↵↵var app = {};↵↵app.level = 4;↵↵app.score = {};↵app.score.number = 0;↵app.score.el = document.getElementById("score");↵app.score.update = function(score) {↵ app.score.number = score;↵ app.score.el.textContent = app.score.number;↵};↵↵app.score.reset = function() {↵ app.score.number = 0;↵ app.score.update(0);↵};↵↵app.results = function(points) {↵ if (points == "reset") {↵ sessionStorage.setItem("results", 0);↵ } else {↵ if (!sessionStorage.getItem("results")) {↵ sessionStorage.setItem("results", points);↵ } else {↵ var newscore = parseInt(sessionStorage.getItem("results")) points;↵ sessionStorage.setItem("results", newscore);↵ }↵ }↵};↵↵app.launchScreen = function(lastScore, title, description, btnText) {↵ app.launchScreen.el = document.getElementById("launch-screen");↵ app.launchScreen.el.setAttribute("class", "is-visible");↵↵ var launchScreenTitle = document.getElementById("launch-screen__title");↵ launchScreenTitle.textContent = title;↵↵ var launchScreenDescription = document.getElementById(↵ "launch-screen__description"↵ );↵ launchScreenDescription.textContent = description;↵↵ app.launchScreen.btn = document.getElementById("start-btn");↵ app.launchScreen.btn.textContent = btnText;↵↵ app.launchScreen.btn.addEventListener("click", function lauch() {↵ app.launchScreen.el.setAttribute("class", "");↵ app.start(app.level);↵ app.launchScreen.btn.removeEventListener("click", lauch);↵ });↵};↵↵app.preline = new Line(0, 0, 200, 200);↵app.preline.setAttr("id", "preline");↵↵app.start = function(dotsNum) {↵ dots.num = dotsNum;↵↵ for (i = 0; i < dots.num; i ) {↵ var cx = getRandomArbitrary(10, screenW - 10);↵ var cy = getRandomArbitrary(10, screenH - 10);↵↵ dots.list[i] = new Dot(8, cx, cy);↵ dots.list[i].setAttr("data-id", "id-" i);↵ dots.list[i].setAttr(↵ "style", ↵ "animation-delay:" i / 10 "s; transform-origin: " cx 'px ' cy 'px;');↵ dots.list[i].update();↵ dots.list[i].append();↵ dots.left.push(i);↵↵ if (i == dots.start) {↵ dots.selected.cx = dots.list[dots.start].cx;↵ dots.selected.cy = dots.list[dots.start].cy;↵ dots.list[dots.start].setAttr("class", "dot dot--starting");↵ dots.left.splice(i, 1);↵ }↵↵ // adds the preline↵↵ app.preline.update(↵ dots.selected.cx,↵ dots.selected.cy,↵ dots.selected.cx,↵ dots.selected.cy↵ );↵ app.preline.append();↵↵ svg.addEventListener("mousemove", function prelineMove(e) {↵ mouseX = e.pageX;↵ mouseY = e.pageY;↵ app.preline.update(dots.selected.cx, dots.selected.cy, mouseX, mouseY);↵ });↵ }↵↵ // sets starting point↵ dots.list[dots.start].setAttr("data-selected", "true");↵};↵↵app.end = function(win) {↵ if (win) {↵ app.level = 4;↵ app.results(app.score.number);↵ } else {↵ app.level = 4;↵ }↵↵ dots.list = [];↵ dots.selected = {};↵ dots.left.length = 0;↵ svg.innerHTML = "";↵↵ if (win) {↵ app.launchScreen(↵ app.score.number,↵ "Well done!",↵ "Your score is: " sessionStorage.getItem("results") ' The next level will be harder.',↵ "PLAY NEXT LEVEL"↵ );↵ } else {↵ app.launchScreen(↵ 0,↵ "Game over!",↵ "Your final score is: " sessionStorage.getItem("results"),↵ "PLAY AGAIN"↵ );↵ app.results("reset");↵ app.score.reset();↵ }↵};↵↵app.launchScreen(↵ 0,↵ "Path finder",↵ "Find the nearest yellow dot.",↵ "PLAY"↵);↵↵</script>↵↵"
   28. innerText: "Path finder↵↵Find the nearest yellow dot.↵↵PLAY"
   29. inputMode: ""
   30. isConnected: true
   31. isContentEditable: false
   32. lang: ""
   33. lastChild: text
   34. lastElementChild: script
   35. link: ""
   36. localName: "body"
   37. namespaceURI: "http://www.w3.org/1999/xhtml"
   38. nextElementSibling: null
   39. nextSibling: null
   40. nodeName: "BODY"
   41. nodeType: 1
   42. nodeValue: null
   43. nonce: ""
   44. offsetHeight: 610
   45. offsetLeft: 0
   46. offsetParent: null
   47. offsetTop: 0
   48. offsetWidth: 572
   49. onabort: null
   50. onafterprint: null
   51. onauxclick: null
   52. onbeforecopy: null
   53. onbeforecut: null
   54. onbeforepaste: null
   55. onbeforeprint: null
   56. onbeforeunload: null
   57. onblur: null
   58. oncancel: null
   59. oncanplay: null
   60. oncanplaythrough: null
   61. onchange: null
   62. onclick: null
   63. onclose: null
   64. oncontextmenu: null
   65. oncopy: null
   66. oncuechange: null
   67. oncut: null
   68. ondblclick: null
   69. ondrag: null
   70. ondragend: null
   71. ondragenter: null
   72. ondragleave: null
   73. ondragover: null
   74. ondragstart: null
   75. ondrop: null
   76. ondurationchange: null
   77. onemptied: null
   78. onended: null
   79. onerror: null
   80. onfocus: null
   81. onfullscreenchange: null
   82. onfullscreenerror: null
   83. ongotpointercapture: null
   84. onhashchange: null
   85. oninput: null
   86. oninvalid: null
   87. onkeydown: null
   88. onkeypress: null
   89. onkeyup: null
   90. onlanguagechange: null
   91. onload: null
   92. onloadeddata: null
   93. onloadedmetadata: null
   94. onloadstart: null
   95. onlostpointercapture: null
   96. onmessage: null
   97. onmessageerror: null
   98. onmousedown: null
   99. onmouseenter: null
   100. onmouseleave: null
   101. onmousemove: null
   102. onmouseout: null
   103. onmouseover: null
   104. onmouseup: null
   105. onmousewheel: null
   106. onoffline: null
   107. ononline: null
   108. onpagehide: null
   109. onpageshow: null
   110. onpaste: null
   111. onpause: null
   112. onplay: null
   113. onplaying: null
   114. onpointercancel: null
   115. onpointerdown: null
   116. onpointerenter: null
   117. onpointerleave: null
   118. onpointermove: null
   119. onpointerout: null
   120. onpointerover: null
   121. onpointerup: null
   122. onpopstate: null
   123. onprogress: null
   124. onratechange: null
   125. onrejectionhandled: null
   126. onreset: null
   127. onresize: null
   128. onscroll: null
   129. onsearch: null
   130. onseeked: null
   131. onseeking: null
   132. onselect: null
   133. onselectionchange: null
   134. onselectstart: null
   135. onstalled: null
   136. onstorage: null
   137. onsubmit: null
   138. onsuspend: null
   139. ontimeupdate: null
   140. ontoggle: null
   141. onunhandledrejection: null
   142. onunload: null
   143. onvolumechange: null
   144. onwaiting: null
   145. onwebkitfullscreenchange: null
   146. onwebkitfullscreenerror: null
   147. onwheel: null
   148. outerHTML: "<body>↵<div id="app">↵ <div id="score"></div>↵ <svg id="svg"></svg>↵ ↵ <div id="launch-screen" class="is-visible">↵ ↵ <div id="launch-screen-content">↵ <h1 id="launch-screen__title">Path finder</h1>↵ <p id="launch-screen__description">Find the nearest yellow dot.</p>↵ <button class="btn" id="start-btn">PLAY</button>↵ </div>↵ </div>↵ ↵</div>↵<script type="text/javascript">↵↵////////////////↵// helpers↵////////////////↵↵function getDistance(obj1, obj2) {↵ return Math.floor(↵ Math.sqrt(Math.pow(obj1.cx - obj2.cx, 2) Math.pow(obj1.cy - obj2.cy, 2))↵ );↵}↵↵function getRandomArbitrary(min, max) {↵ return Math.floor(Math.random() * (max - min) min);↵}↵↵function comparator(a, b) {↵ if (a[1] < b[1]) return -1;↵ if (a[1] > b[1]) return 1;↵ return 0;↵}↵↵function difference(source, toRemove) {↵ return source.filter(function(value) {↵ return toRemove.indexOf(value) == -1;↵ });↵}↵↵////////////////↵// global vars↵////////////////↵↵var svg = document.getElementById("svg");↵var dotMatrix = document.createElementNS(↵ "http://www.w3.org/2000/svg",↵ "circle"↵);↵var lineMatrix = document.createElementNS("http://www.w3.org/2000/svg", "line");↵var screenW = window.innerWidth;↵var screenH = window.innerHeight;↵var totalDist = document.getElementById("distance");↵↵////////////////↵// line constructor↵////////////////↵↵function Line(x1, y1, x2, y2) {↵ this.x1 = x1;↵ this.y1 = y1;↵ this.x2 = x2;↵ this.y2 = y2;↵ this.el = document.createElementNS("http://www.w3.org/2000/svg", "line");↵ this.class = "line";↵ this.update = function(x1, y1, x2, y2) {↵ this.el.setAttribute("x1", x1 || this.x1);↵ this.el.setAttribute("y1", y1 || this.y1);↵ this.el.setAttribute("x2", x2 || this.x2);↵ this.el.setAttribute("y2", y2 || this.y2);↵ this.setAttr("class", this.class);↵ };↵ this.setAttr = function(attr, value) {↵ this.el.setAttribute(attr, value);↵ };↵ this.append = function() {↵ svg.insertBefore(this.el, svg.firstChild);↵ };↵}↵↵////////////////↵// dot constructor↵////////////////↵↵function Dot(r, cx, cy) {↵ this.r = r;↵ this.cx = cx;↵ this.cy = cy;↵ this.el = document.createElementNS("http://www.w3.org/2000/svg", "circle");↵ this.class = "dot";↵ this.update = function() {↵ this.el.setAttribute("r", this.r);↵ this.el.setAttribute("cx", this.cx);↵ this.el.setAttribute("cy", this.cy);↵ this.setAttr("class", this.class);↵ };↵↵ // activates a dot↵ this.activate = function() {↵ for (i = 0; i < dots.num; i ) {↵ dots.list[i].setAttr("data-selected", "false");↵ }↵ this.setAttr("data-selected", "true");↵ };↵↵ this.visited = function() {↵ this.setAttr("data-visited", "true");↵ };↵↵ // sets attribute to element↵ this.setAttr = function(attr, value) {↵ this.el.setAttribute(attr, value);↵ };↵↵ // gets attribute to element↵ this.getAttr = function(attr) {↵ return this.el.getAttribute(attr);↵ };↵↵ // appends element to svg and attaches event listeners↵ this.append = function() {↵ svg.appendChild(this.el);↵ this.el.addEventListener("click", this.onClick);↵ };↵↵ // on click on element↵ this.onClick = function(event) {↵ //gets the id and the coords of the dot↵ var thisId = Number(event.target.getAttribute("data-id").substr(3, 2));↵ var thisCx = dots.list[thisId].cx;↵ var thisCy = dots.list[thisId].cy;↵↵ // calculates the distance between dots↵ var distances = [];↵ for (i = 0; i < dots.num; i ) {↵ distances[i] = [i, getDistance(dots.selected, dots.list[i])];↵ }↵ distances.sort(comparator);↵ distances.splice(0, 1);↵ var distancesLeft = [];↵ for (i = 0; i < distances.length; i ) {↵ if (dots.left.includes(distances[i][0])) {↵ distancesLeft.push(distances[i][0]);↵ }↵ }↵↵ //if the element is the nearest↵ if (thisId == distancesLeft[0] && dots.left.includes(thisId)) {↵ // calculates distances↵ var newDistance = getDistance(dots.list[thisId], dots.selected);↵↵ app.score.update(1); // punteggio x numero di poi↵ // app.score.update(newDistance); punteggio x distanza↵↵ //sets the active class to the selected dot↵ dots.list[thisId].activate();↵ dots.list[thisId].visited();↵↵ // creates the line↵ lines.list.push(↵ new Line(↵ dots.selected.cx,↵ dots.selected.cy,↵ dots.list[thisId].cx,↵ dots.list[thisId].cy↵ )↵ );↵ lines.list[lines.list.length - 1].update();↵ lines.list[lines.list.length - 1].append();↵↵ // creates the preview line↵ //TODO: eliminare le vecchie preline che rimangono vive↵↵ svg.addEventListener("mousemove", function prelineMove(e) {↵ mouseX = e.pageX;↵ mouseY = e.pageY;↵ app.preline.update(thisCx, thisCy, mouseX, mouseY);↵ });↵↵ //saves the selected dots coordinates↵ dots.selected.id = thisId;↵ dots.selected.cx = thisCx;↵ dots.selected.cy = thisCy;↵↵ //removes the dot from the list of remaining dots↵ for (i = 0; i < dots.left.length; i ) {↵ if (dots.left[i] === thisId) {↵ dots.left.splice(i, 1);↵ }↵ }↵↵ if (dots.left.length == 0) {↵ app.end(true);↵ }↵ } else {↵ app.end(false);↵ }↵ };↵}↵↵////////////////↵// lines group↵////////////////↵↵var lines = {↵ list: []↵};↵↵////////////////↵// dots group↵////////////////↵↵var dots = {};↵dots.num = 20;↵dots.list = [];↵dots.start = 0;↵dots.selected = {};↵dots.selected.id = dots.start;↵dots.left = [];↵dots.preline;↵↵////////////////↵// app↵////////////////↵↵var app = {};↵↵app.level = 4;↵↵app.score = {};↵app.score.number = 0;↵app.score.el = document.getElementById("score");↵app.score.update = function(score) {↵ app.score.number = score;↵ app.score.el.textContent = app.score.number;↵};↵↵app.score.reset = function() {↵ app.score.number = 0;↵ app.score.update(0);↵};↵↵app.results = function(points) {↵ if (points == "reset") {↵ sessionStorage.setItem("results", 0);↵ } else {↵ if (!sessionStorage.getItem("results")) {↵ sessionStorage.setItem("results", points);↵ } else {↵ var newscore = parseInt(sessionStorage.getItem("results")) points;↵ sessionStorage.setItem("results", newscore);↵ }↵ }↵};↵↵app.launchScreen = function(lastScore, title, description, btnText) {↵ app.launchScreen.el = document.getElementById("launch-screen");↵ app.launchScreen.el.setAttribute("class", "is-visible");↵↵ var launchScreenTitle = document.getElementById("launch-screen__title");↵ launchScreenTitle.textContent = title;↵↵ var launchScreenDescription = document.getElementById(↵ "launch-screen__description"↵ );↵ launchScreenDescription.textContent = description;↵↵ app.launchScreen.btn = document.getElementById("start-btn");↵ app.launchScreen.btn.textContent = btnText;↵↵ app.launchScreen.btn.addEventListener("click", function lauch() {↵ app.launchScreen.el.setAttribute("class", "");↵ app.start(app.level);↵ app.launchScreen.btn.removeEventListener("click", lauch);↵ });↵};↵↵app.preline = new Line(0, 0, 200, 200);↵app.preline.setAttr("id", "preline");↵↵app.start = function(dotsNum) {↵ dots.num = dotsNum;↵↵ for (i = 0; i < dots.num; i ) {↵ var cx = getRandomArbitrary(10, screenW - 10);↵ var cy = getRandomArbitrary(10, screenH - 10);↵↵ dots.list[i] = new Dot(8, cx, cy);↵ dots.list[i].setAttr("data-id", "id-" i);↵ dots.list[i].setAttr(↵ "style", ↵ "animation-delay:" i / 10 "s; transform-origin: " cx 'px ' cy 'px;');↵ dots.list[i].update();↵ dots.list[i].append();↵ dots.left.push(i);↵↵ if (i == dots.start) {↵ dots.selected.cx = dots.list[dots.start].cx;↵ dots.selected.cy = dots.list[dots.start].cy;↵ dots.list[dots.start].setAttr("class", "dot dot--starting");↵ dots.left.splice(i, 1);↵ }↵↵ // adds the preline↵↵ app.preline.update(↵ dots.selected.cx,↵ dots.selected.cy,↵ dots.selected.cx,↵ dots.selected.cy↵ );↵ app.preline.append();↵↵ svg.addEventListener("mousemove", function prelineMove(e) {↵ mouseX = e.pageX;↵ mouseY = e.pageY;↵ app.preline.update(dots.selected.cx, dots.selected.cy, mouseX, mouseY);↵ });↵ }↵↵ // sets starting point↵ dots.list[dots.start].setAttr("data-selected", "true");↵};↵↵app.end = function(win) {↵ if (win) {↵ app.level = 4;↵ app.results(app.score.number);↵ } else {↵ app.level = 4;↵ }↵↵ dots.list = [];↵ dots.selected = {};↵ dots.left.length = 0;↵ svg.innerHTML = "";↵↵ if (win) {↵ app.launchScreen(↵ app.score.number,↵ "Well done!",↵ "Your score is: " sessionStorage.getItem("results") ' The next level will be harder.',↵ "PLAY NEXT LEVEL"↵ );↵ } else {↵ app.launchScreen(↵ 0,↵ "Game over!",↵ "Your final score is: " sessionStorage.getItem("results"),↵ "PLAY AGAIN"↵ );↵ app.results("reset");↵ app.score.reset();↵ }↵};↵↵app.launchScreen(↵ 0,↵ "Path finder",↵ "Find the nearest yellow dot.",↵ "PLAY"↵);↵↵</script>↵↵</body>"
   149. outerText: "Path finder↵↵Find the nearest yellow dot.↵↵PLAY"
   150. ownerDocument: document
   151. parentElement: html
   152. parentNode: html
   153. part: DOMTokenList [value: ""]
   154. prefix: null
   155. previousElementSibling: head
   156. previousSibling: text
   157. scrollHeight: 610
   158. scrollLeft: 0
   159. scrollTop: 0
   160. scrollWidth: 572
   161. shadowRoot: null
   162. slot: ""
   163. spellcheck: true
   164. style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
   165. tabIndex: -1
   166. tagName: "BODY"
   167. text: ""
   168. textContent: "↵↵ ↵ ↵ ↵ ↵ ↵ ↵ Path finder↵ Find the nearest yellow dot.↵ PLAY↵ ↵ ↵ ↵↵↵↵////////////////↵// helpers↵////////////////↵↵function getDistance(obj1, obj2) {↵ return Math.floor(↵ Math.sqrt(Math.pow(obj1.cx - obj2.cx, 2) Math.pow(obj1.cy - obj2.cy, 2))↵ );↵}↵↵function getRandomArbitrary(min, max) {↵ return Math.floor(Math.random() * (max - min) min);↵}↵↵function comparator(a, b) {↵ if (a[1] < b[1]) return -1;↵ if (a[1] > b[1]) return 1;↵ return 0;↵}↵↵function difference(source, toRemove) {↵ return source.filter(function(value) {↵ return toRemove.indexOf(value) == -1;↵ });↵}↵↵////////////////↵// global vars↵////////////////↵↵var svg = document.getElementById("svg");↵var dotMatrix = document.createElementNS(↵ "http://www.w3.org/2000/svg",↵ "circle"↵);↵var lineMatrix = document.createElementNS("http://www.w3.org/2000/svg", "line");↵var screenW = window.innerWidth;↵var screenH = window.innerHeight;↵var totalDist = document.getElementById("distance");↵↵////////////////↵// line constructor↵////////////////↵↵function Line(x1, y1, x2, y2) {↵ this.x1 = x1;↵ this.y1 = y1;↵ this.x2 = x2;↵ this.y2 = y2;↵ this.el = document.createElementNS("http://www.w3.org/2000/svg", "line");↵ this.class = "line";↵ this.update = function(x1, y1, x2, y2) {↵ this.el.setAttribute("x1", x1 || this.x1);↵ this.el.setAttribute("y1", y1 || this.y1);↵ this.el.setAttribute("x2", x2 || this.x2);↵ this.el.setAttribute("y2", y2 || this.y2);↵ this.setAttr("class", this.class);↵ };↵ this.setAttr = function(attr, value) {↵ this.el.setAttribute(attr, value);↵ };↵ this.append = function() {↵ svg.insertBefore(this.el, svg.firstChild);↵ };↵}↵↵////////////////↵// dot constructor↵////////////////↵↵function Dot(r, cx, cy) {↵ this.r = r;↵ this.cx = cx;↵ this.cy = cy;↵ this.el = document.createElementNS("http://www.w3.org/2000/svg", "circle");↵ this.class = "dot";↵ this.update = function() {↵ this.el.setAttribute("r", this.r);↵ this.el.setAttribute("cx", this.cx);↵ this.el.setAttribute("cy", this.cy);↵ this.setAttr("class", this.class);↵ };↵↵ // activates a dot↵ this.activate = function() {↵ for (i = 0; i < dots.num; i ) {↵ dots.list[i].setAttr("data-selected", "false");↵ }↵ this.setAttr("data-selected", "true");↵ };↵↵ this.visited = function() {↵ this.setAttr("data-visited", "true");↵ };↵↵ // sets attribute to element↵ this.setAttr = function(attr, value) {↵ this.el.setAttribute(attr, value);↵ };↵↵ // gets attribute to element↵ this.getAttr = function(attr) {↵ return this.el.getAttribute(attr);↵ };↵↵ // appends element to svg and attaches event listeners↵ this.append = function() {↵ svg.appendChild(this.el);↵ this.el.addEventListener("click", this.onClick);↵ };↵↵ // on click on element↵ this.onClick = function(event) {↵ //gets the id and the coords of the dot↵ var thisId = Number(event.target.getAttribute("data-id").substr(3, 2));↵ var thisCx = dots.list[thisId].cx;↵ var thisCy = dots.list[thisId].cy;↵↵ // calculates the distance between dots↵ var distances = [];↵ for (i = 0; i < dots.num; i ) {↵ distances[i] = [i, getDistance(dots.selected, dots.list[i])];↵ }↵ distances.sort(comparator);↵ distances.splice(0, 1);↵ var distancesLeft = [];↵ for (i = 0; i < distances.length; i ) {↵ if (dots.left.includes(distances[i][0])) {↵ distancesLeft.push(distances[i][0]);↵ }↵ }↵↵ //if the element is the nearest↵ if (thisId == distancesLeft[0] && dots.left.includes(thisId)) {↵ // calculates distances↵ var newDistance = getDistance(dots.list[thisId], dots.selected);↵↵ app.score.update(1); // punteggio x numero di poi↵ // app.score.update(newDistance); punteggio x distanza↵↵ //sets the active class to the selected dot↵ dots.list[thisId].activate();↵ dots.list[thisId].visited();↵↵ // creates the line↵ lines.list.push(↵ new Line(↵ dots.selected.cx,↵ dots.selected.cy,↵ dots.list[thisId].cx,↵ dots.list[thisId].cy↵ )↵ );↵ lines.list[lines.list.length - 1].update();↵ lines.list[lines.list.length - 1].append();↵↵ // creates the preview line↵ //TODO: eliminare le vecchie preline che rimangono vive↵↵ svg.addEventListener("mousemove", function prelineMove(e) {↵ mouseX = e.pageX;↵ mouseY = e.pageY;↵ app.preline.update(thisCx, thisCy, mouseX, mouseY);↵ });↵↵ //saves the selected dots coordinates↵ dots.selected.id = thisId;↵ dots.selected.cx = thisCx;↵ dots.selected.cy = thisCy;↵↵ //removes the dot from the list of remaining dots↵ for (i = 0; i < dots.left.length; i ) {↵ if (dots.left[i] === thisId) {↵ dots.left.splice(i, 1);↵ }↵ }↵↵ if (dots.left.length == 0) {↵ app.end(true);↵ }↵ } else {↵ app.end(false);↵ }↵ };↵}↵↵////////////////↵// lines group↵////////////////↵↵var lines = {↵ list: []↵};↵↵////////////////↵// dots group↵////////////////↵↵var dots = {};↵dots.num = 20;↵dots.list = [];↵dots.start = 0;↵dots.selected = {};↵dots.selected.id = dots.start;↵dots.left = [];↵dots.preline;↵↵////////////////↵// app↵////////////////↵↵var app = {};↵↵app.level = 4;↵↵app.score = {};↵app.score.number = 0;↵app.score.el = document.getElementById("score");↵app.score.update = function(score) {↵ app.score.number = score;↵ app.score.el.textContent = app.score.number;↵};↵↵app.score.reset = function() {↵ app.score.number = 0;↵ app.score.update(0);↵};↵↵app.results = function(points) {↵ if (points == "reset") {↵ sessionStorage.setItem("results", 0);↵ } else {↵ if (!sessionStorage.getItem("results")) {↵ sessionStorage.setItem("results", points);↵ } else {↵ var newscore = parseInt(sessionStorage.getItem("results")) points;↵ sessionStorage.setItem("results", newscore);↵ }↵ }↵};↵↵app.launchScreen = function(lastScore, title, description, btnText) {↵ app.launchScreen.el = document.getElementById("launch-screen");↵ app.launchScreen.el.setAttribute("class", "is-visible");↵↵ var launchScreenTitle = document.getElementById("launch-screen__title");↵ launchScreenTitle.textContent = title;↵↵ var launchScreenDescription = document.getElementById(↵ "launch-screen__description"↵ );↵ launchScreenDescription.textContent = description;↵↵ app.launchScreen.btn = document.getElementById("start-btn");↵ app.launchScreen.btn.textContent = btnText;↵↵ app.launchScreen.btn.addEventListener("click", function lauch() {↵ app.launchScreen.el.setAttribute("class", "");↵ app.start(app.level);↵ app.launchScreen.btn.removeEventListener("click", lauch);↵ });↵};↵↵app.preline = new Line(0, 0, 200, 200);↵app.preline.setAttr("id", "preline");↵↵app.start = function(dotsNum) {↵ dots.num = dotsNum;↵↵ for (i = 0; i < dots.num; i ) {↵ var cx = getRandomArbitrary(10, screenW - 10);↵ var cy = getRandomArbitrary(10, screenH - 10);↵↵ dots.list[i] = new Dot(8, cx, cy);↵ dots.list[i].setAttr("data-id", "id-" i);↵ dots.list[i].setAttr(↵ "style", ↵ "animation-delay:" i / 10 "s; transform-origin: " cx 'px ' cy 'px;');↵ dots.list[i].update();↵ dots.list[i].append();↵ dots.left.push(i);↵↵ if (i == dots.start) {↵ dots.selected.cx = dots.list[dots.start].cx;↵ dots.selected.cy = dots.list[dots.start].cy;↵ dots.list[dots.start].setAttr("class", "dot dot--starting");↵ dots.left.splice(i, 1);↵ }↵↵ // adds the preline↵↵ app.preline.update(↵ dots.selected.cx,↵ dots.selected.cy,↵ dots.selected.cx,↵ dots.selected.cy↵ );↵ app.preline.append();↵↵ svg.addEventListener("mousemove", function prelineMove(e) {↵ mouseX = e.pageX;↵ mouseY = e.pageY;↵ app.preline.update(dots.selected.cx, dots.selected.cy, mouseX, mouseY);↵ });↵ }↵↵ // sets starting point↵ dots.list[dots.start].setAttr("data-selected", "true");↵};↵↵app.end = function(win) {↵ if (win) {↵ app.level = 4;↵ app.results(app.score.number);↵ } else {↵ app.level = 4;↵ }↵↵ dots.list = [];↵ dots.selected = {};↵ dots.left.length = 0;↵ svg.innerHTML = "";↵↵ if (win) {↵ app.launchScreen(↵ app.score.number,↵ "Well done!",↵ "Your score is: " sessionStorage.getItem("results") ' The next level will be harder.',↵ "PLAY NEXT LEVEL"↵ );↵ } else {↵ app.launchScreen(↵ 0,↵ "Game over!",↵ "Your final score is: " sessionStorage.getItem("results"),↵ "PLAY AGAIN"↵ );↵ app.results("reset");↵ app.score.reset();↵ }↵};↵↵app.launchScreen(↵ 0,↵ "Path finder",↵ "Find the nearest yellow dot.",↵ "PLAY"↵);↵↵↵↵"
   169. title: ""
   170. translate: true
   171. vLink: ""
   172. __proto__: HTMLBodyElement
   1. HTMLBodyElement
   1. HTMLElement
   1. Element
   1. Node
   1. EventTarget
   1. Object